<!--
 * @Date: 2023-08-17 16:53:22
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-08-24 20:30:48
 * @FilePath: \part-cloud-appd:\project\company\veteran-cadre-app\src\components\sonic-animation.vue
-->
<script setup lang="ts">
const props = defineProps({
  bgColor: {
    type: String,
    default: 'white',
  },
  isPlay: {
    type: Boolean,
    default: true,
  },
})
</script>

<template>
  <view class="time-box">
    <view class="start-taste-line">
      <view
        v-for="(e, i) in 10"
        :key="e"
        :style="{ backgroundColor: props.bgColor }"
        class="view animation"
        :class="[
          props.isPlay ? 'animation-play' : 'animation-paused',
          `view${i + 1}`,
        ]"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 声波动画
.time-box .start-taste-line {
  width: 86rpx;
  display: flex;
  align-items: center;
}
.time-box .start-taste-line .view {
  background-color: red; //声波颜色
  width: 3px;
  height: 6px;
  margin: 0 0.03rem;
  display: inline-block;
  border: none;
}
.animation-play {
  animation-play-state: running !important;
}
.animation-paused {
  animation-play-state: paused !important;
}
.animation {
  animation: note 0.2s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.view1 {
  animation-delay: -1s;
}

.view2 {
  animation-delay: -0.9s;
}

.view3 {
  animation-delay: -0.8s;
}

.view4 {
  animation-delay: -0.7s;
}

.view5 {
  animation-delay: -0.6s;
}

.view6 {
  animation-delay: -0.5s;
}

.view7 {
  animation-delay: -0.4s;
}

.view8 {
  animation-delay: -0.3s;
}

.view9 {
  animation-delay: -0.2s;
}

.view10 {
  animation-delay: -0.1s;
}

@keyframes note {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(4);
  }
}
</style>
